<template>
  <div class="container">
    <!-- <div ref="chart" style="height: 21vh; width: 100%"></div> -->
    <div class="content">
      <span
        style="
          width: 800px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <router-link class="back-link" to="/main">
          <i class="el-icon-arrow-left"></i>
          返回
        </router-link>
        <!-- <el-button style="margin-right: 20px;" type="primary" @click="$router.push('/main')" icon="el-icon-back">返回</el-button> -->

        <!-- 添加搜索输入框 -->
        <input
          class="search-input"
          v-model="searchQuery"
          placeholder="🔍 搜索..."
        />
      </span>
      <div class="section-header">
        <div class="section-title">
          <span>👤</span>
          <span>人事部</span>
        </div>
        <div class="section-desc">人力资源管理与组织发展</div>
      </div>
2b 2亿数据量 拆分数据库拆表 rabitmq es 分库分表（微服务的每个服务单独数据库） 服务被拆分 每个服务可以看出一个单独的项目 项目与项目直接的通讯rpc 暴露每个项目api供其他项目调用 nacos服务的注册与发现
一致性方案：
      强一致性：支付，库存
      最终一致性：订单，消息发送
      弱一致性：点赞

      补偿机制：死信队列
      <div class="button-container">
        <!-- 使用 v-for 动态渲染过滤后的 router-link filteredLinks-->
        <router-link
          v-for="link in filteredLinks"
          :key="link.to"
          class="nav-button"
          :to="link.to"
        >
          <span class="i">{{ link.icon }}</span>
          <span>{{ link.text }}</span>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
data() {
  return {
    searchQuery: '',
    links: [
      {
        to: '/main/renshi/renliziyuanguihua', icon: '👔', text: '人力资源规划', keywords: ['战略层面的人力资源规划', '人力资源需求预测', '人力资源供给预测', '人力资源供需平衡规划', '人力资源配置规划', '培训与开发规划', '薪酬与福利规划', '人力资源预测规划', '人力资源规划的评估与调整']
      },
      { to: '/main/renshi/banciguanli', icon: '⏰', text: '班次管理', keywords: ['排班报表 排班设置'] },
      { to: '/main/renshi/jiaqiguanli', icon: '🏖️', text: '假期管理', keywords: ['假期管理规定 请假核决权限表 年假管理规定 请假单'] },
      { to: '/main/renshi/tuixiujiepin', icon: '👨‍🦳', text: '退休解聘' },
      { to: '/main/renshi/yuangongdangan/yuangongguanli/yuangongguanli', icon: '🧑', text: '员工档案', keywords: ['查看员工基本信息 奖惩提报单 专项奖励申请单 奖惩管理办法 合同信息  证书 教育背景工作履历 语种信息'] },
      { to: '/main/biao', icon: '💼', text: '招聘管理', keywords: ['面试记录表', '人员增补申请单', '员工入职资料表', '职位说明书', '岗位职责目标责任书', '公司规章制度培训签到表', '员工入职信息核定表', '背景调查表', '职员基本薪资核定表', '面试通知书 录用通知书 工作表现评核表 一级评估输出指引表', '三级安全教育制度 新员工入职培训签到表 招聘流程修订内容',] },
      { to: '/main/renshi/renshidiaodong', icon: '🔄', text: '人事调动', keywords: [' 员工离职程序二联单 员工离岗登记表 离职证明 职员/员工离职申请表'] },
      { to: '/main/renshi/kaoqing', icon: '📼', text: '考勤管理', keywords: ['考勤打卡 考勤规则 考勤数据 异常考勤确认表 考勤异常确认表 员工临时出入登记表 公务外出申请单 异常出勤签录申请单 刷卡异常登记表 加班申请单 考勤汇总表 考勤管理办法 考勤管理流程 企管部人资组 考勤专员职位说明书'] },
      { to: '/main/renshi/jixiao', icon: '🏅', text: '绩效考核', keywords: ['绩效奖金基数报批表 绩效面谈记录表 绩效考评申诉表 职位薪资异动申请表 职员绩效薪资核定表 文件新增修订废止申请单 绩效考核实施细则'] },
      { to: '/main/renshi/danganguanli', icon: '🗃️', text: '档案管理', keywords: ['员工合同 员工劳动合同管理 档案管理 员工档案信息管理 档案设置 档案管理系统设置 合同设置 员工合同模板配置'] },
      { to: '/main/renshi/renshizhidu', icon: '⚙️', text: '人事制度', keywords: ['调休申请单 工作移交单 收入证明 新员工实习资料表 外部联络函 内部联络函 文件资料稽查表 员工内部调动审批表 月份人事异动令 发电费用核算表 工务维修申请单 合同相关类 协议书 协商解除劳动合同协议书一（甲方提出解除适用） 协商解除劳动合同协议书二（乙方解除适用）续订劳动合同确认书 员工外出放行单 人事档案管理手册 人事档案 借出 调阅 申请单 人事档案 注销 报废 申请单 企管人资组 人事专员职位说明书 人事档案管理规定'] },
      { to: '#', icon: '🎓', text: '培训管理' },
      { to: '/main/renshi/tongjifenxi/tongjifenxi', icon: '📈', text: '统计分析', keywords: ['入职人员统计 在职人员统计 离职人员统计 人事调动统计 合同签订统计 员工奖惩统计 招聘录用统计 员工培训统计 人事编制统计 人事结构统计'] },
      { to: '/main/biao/wenjianzl', icon: '', text: ' 文件管制总览表 0001' },
      { to: '/main/biao/biaodanzl', icon: '', text: ' 表单管制总览表 0002' },
      { to: '/main/biao/wailai', icon: '', text: ' 外来文件登记表 0003' },
      { to: '/main/biao/huishen', icon: '', text: ' 文件会审表 0004' },
      { to: '/main/biao/wjbufa', icon: '', text: ' 文件补发申请单 0005' },
      { to: '/main/biao/ffhuishou', icon: '', text: ' 文件发放与回收记录 0006' },
      { to: '/main/biao/ffhuishous', icon: '', text: ' 文件发放与回收记录 0007' },
      { to: '/main/biao/xdfeizhi', icon: '', text: ' 文件修订 / 废止申请单 0008' },
      { to: '/main/biao/xiaohui', icon: '', text: ' 文件销毁申请单 0009' },
      { to: '/main/biao/jieyue', icon: '', text: ' 文件借阅登记表 0010' },
      { to: '/main/xingzheng', icon: '', text: ' 行政管理 ' },
      { to: '/main/xingzheng/gudingzichan', icon: '', text: ' 固定资产管理 ' },
      { to: '/main/xingzheng/gudingzichan/gdzcpandian', icon: '', text: ' 固定资产盘点表 ' },
      { to: '/main/xingzheng/gdzczhuanyi/gdzczhuanyi', icon: '', text: ' 固定资产转移单 ' },
      { to: '/main/xingzheng/sbweixiusq/sbweixiusq', icon: '', text: ' 设备维修申请单 ' },
      { to: '/main/xingzheng/sbyanshou/sbyanshou', icon: '', text: ' 设备验收记录表 ' },
      { to: '/main/xingzheng/rukudan/rukudan', icon: '', text: ' 成品入库单 ' },
      { to: '/main/xingzheng/gdzichanbq/gdzichanbq', icon: '', text: ' 固定资产标签 ' },
      { to: '/main/xingzheng/sblvlibiao/sblvlibiao', icon: '', text: ' 机器设备履历卡 ' },
      { to: '/main/xingzheng/gdzctongji/gdzctongji', icon: '', text: ' 新增固定资产月度统计表 ' },
      { to: '/main/xingzheng/zhifuzmd/zhifuzmd', icon: '', text: ' 支付证明单 ' },
      { to: '/main/xingzheng/shengoudan/shengoudan', icon: '', text: ' 申购单 ' },
      { to: '/main/xingzheng/gdzczhuxiao/gdzczhuxiao', icon: '', text: ' 固定资产注销申请单 ' },
      { to: '/main/xingzheng/shebeiguifan/shebeiguifan', icon: '', text: ' 设备仪器管理规范（文件）' },
      { to: '/main/xingzheng/gdzcliucheng/gdzcliucheng', icon: '', text: ' 固定资产盘点作业流程（流程）' },
      { to: '/main/xingzheng/sbyanshoudan/sbyanshoudan', icon: '', text: ' 设备验收单 ' },
      { to: '/main/xingzheng/cunhuopandian/cunhuopandian', icon: '', text: ' 年 月存货盘点表 ' },
      { to: '/main/xingzheng/cunhuopdbaogao/cunhuopdbaogao', icon: '', text: ' 年 月存货盘点报告表 ' },
      { to: '/main/xingzheng/wjfafanghs/wjfafanghs', icon: '', text: ' 固定资产管理办法文件发放与回收记录 ' },
      { to: '/main/xingzheng/gdzichanglbf/gdzichanglbf', icon: '', text: ' 固定资产管理办法 ' },
      { to: '/main/xingzheng/wjfafanghs/hesuanwjfafanghs', icon: '', text: ' 固定资产核算文件发放与回收记录 ' },
      { to: '/main/xingzheng/wjxiudinsqd/wjxiudinsqd', icon: '', text: ' 固定资产管理办法文件新增 / 修订 / 废止申请单 ' },
      { to: '/main/xingzheng/gzhesuanliuchen/gzhesuanliuchen', icon: '', text: ' 固定资产核算流程 ' },
      { to: '/main/xingzheng/wjxiudinsqd/hesuanwjxiudinsqd', icon: '', text: ' 固定资产核算文件新增 / 修订 / 废止申请单 ' },
      { to: '/main/renshi', icon: '', text: ' 人事管理 ' },
      { to: '/main/renshi/dangan/employeeFileInfoStream', icon: '', text: ' 新增员工档案流程 ' },
      { to: '/main/renshi/dangan/employeeFileInfoView', icon: '', text: ' 查看员工档案 ' },
      // { to: '/main/renshi/renshizhidu', icon: '', text: ' 人事制度 ' },
      { to: '/main/renshi/renshizhidu/tiaoxiusq/tiaoxiusq', icon: '', text: ' 调休申请单 ' },
      { to: '/main/renshi/renshizhidu/gzyijiaodan/gzyijiaodan', icon: '', text: ' 工作移交单 ' },
      { to: '/main/renshi/renshizhidu/shouruzm/shouruzm', icon: '', text: ' 收入证明 ' },
      { to: '/main/renshi/renshizhidu/lizhisqd/lizhisqd', icon: '', text: ' 职员 / 员工离职申请表 ' },
      { to: '/main/renshi/renshizhidu/xygshiyong/xygshiyong', icon: '', text: ' 新员工实习试用表 ' },
      { to: '/main/renshi/renshizhidu/skyichangdj/skyichangdj', icon: '', text: ' 刷卡异常登记表 ' },
      { to: '/main/renshi/renshizhidu/wblianluod/wblianluod', icon: '', text: ' 外部联络函 ' },
      { to: '/main/renshi/renshizhidu/nblianluoh/nblianluoh', icon: '', text: ' 内部联络函 ' },
      { to: '/main/renshi/renshizhidu/jichabiao/jichabiao', icon: '', text: ' 文件 / 资料稽查表 ' },
      { to: '/main/renshi/renshizhidu/neibudiaodong/neibudiaodong', icon: '', text: ' 员工内部调动审批 ' },
      { to: '/main/renshi/renshizhidu/dianfeihs/dianfeihs', icon: '', text: ' 发电费用核算表 ' },
      { to: '/main/renshi/renshizhidu/gongwuwxsqd/gongwuwxsqd', icon: '', text: ' 工务维修申请单 ' },
      { to: '/main/renshi/renshizhidu/yfrsyidong/yfrsyidong', icon: '', text: ' 月份人事异动令 ' },
      { to: '/main/renshi/renshizhidu/yglizhi/yglizhi', icon: '', text: ' 员工离职程序二联单 ' },
      { to: '/main/renshi/renshizhidu/ygligangdjb/ygligangdjb', icon: '', text: ' 员工离岗登记表 ' },
      { to: '/main/renshi/renshizhidu/xieyishu/xieyishu', icon: '', text: ' 协议书 ' },
      { to: '/main/renshi/renshizhidu/xsjiechuyi/xsjiechuyi', icon: '', text: ' 协商解除劳动合同协议书一（甲方提出解除适用）' },
      { to: '/main/renshi/renshizhidu/xsjiechuer/xsjiechuer', icon: '', text: ' 协商解除劳动合同协议书二（乙方解除适用）' },
      { to: '/main/renshi/renshizhidu/xdlaodonght/xdlaodonght', icon: '', text: ' 续订劳动合同确认书 ' },
      { to: '/main/renshi/renshizhidu/lizhizm/lizhizm', icon: '', text: ' 离职证明 ' },
      { to: '/main/renshi/renshizhidu/ygwaichufxd/ygwaichufxd', icon: '', text: ' 员工外出放行单 ' },
      { to: '/main/renshi/renshizhidu/rsdangangl/rsdangangl', icon: '', text: ' 人事档案管理手册 ' },
      { to: '/main/renshi/renshizhidu/rsdajiechu/rsdajiechu', icon: '', text: ' 人事档案 借出 调阅 申请单 ' },
      { to: '/main/renshi/renshizhidu/rsdazhuxiao/rsdazhuxiao', icon: '', text: ' 人事档案 注销 报废 申请单 ' },
      { to: '/main/renshi/renshizhidu/rsdaguanligd/rsdaguanligd', icon: '', text: ' 人事档案管理规定 ' },
      { to: '/main/renshi/renshizhidu/qyzhiweisms/qyzhiweisms', icon: '', text: ' 企管人资组 人事专员职位说明书 ' },
      // { to: '/main/renshi/banciguanli', icon: '', text: ' 班次管理 ' },
      { to: '/main/renshi/banciguanli/paibanbaobiao/paibanbaobiao', icon: '', text: ' 排班报表 ' },
      { to: '/main/renshi/banciguanli/paibanshezhi/paibanshezhi', icon: '', text: ' 班次管理》排班设置 ' },
      // { to: '/main/renshi/danganguanli', icon: '', text: ' 档案管理 ' },
      { to: '/main/renshi/danganguanli/yghetong/yghetong', icon: '', text: ' 员工合同 ' },
      { to: '/main/renshi/danganguanli/danganguanli/danganguanli', icon: '', text: ' 档案管理》档案管理文档 ' },
      { to: '/main/renshi/danganguanli/hetongshezhi/hetongshezhi', icon: '', text: ' 员工合同设置 ' },
      // { to: '/main/renshi/jiaqiguanli', icon: '', text: ' 假期管理 ' },
      { to: '/main/renshi/jiaqiguanli/qjhejueqxb/qjhejueqxb', icon: '', text: ' 请假核决权限表 ' },
      { to: '/main/renshi/jiaqiguanli/nianjiaglgd/nianjiaglgd', icon: '', text: ' 年假管理规定 ' },
      { to: '/main/renshi/jiaqiguanli/jiaqiglgd/jiaqiglgd', icon: '', text: ' 假期管理规定 ' },
      { to: '/main/renshi/yuangongdangan', icon: '', text: ' 员工档案 ' },
      // { to: '/main/renshi/yuangongdangan/yuangongguanli/yuangongguanli', icon: '', text: ' 员工档案》员工信息 ' },
      { to: '/main/renshi/yuangongdangan/yuangongguanli/jiangchengbanfa', icon: '', text: ' 员工档案》员工信息》奖惩管理办法 ' },
      { to: '/main/renshi/yuangongdangan/yuangongguanli/yuzhongxx', icon: '', text: ' 员工档案》员工语种能力信息 ' },
      { to: '/main/renshi/yuangongdangan/yuangongguanli/gongzuolvli', icon: '', text: ' 员工档案》员工工作履历信息 ' },
      { to: '/main/renshi/yuangongdangan/yuangongguanli/zhengshuxx', icon: '', text: ' 员工档案》员工证书信息 ' },
      // { to: '/main/renshi/yuangongdangan/yonghuguanli/yonghuguanli', icon: '', text: '' },
      { to: '/main/renshi/renliziyuanguihua', icon: '', text: ' 人力资源规划 ' },
      { to: '/main/renshi/renliziyuanguihua/zhanluecm/zhanluecm', icon: '', text: ' 战略层面的人力资源规划 ' ,keywords:['人力资源规划 > 战略层面的人力资源规划']},
      { to: '/main/renshi/renliziyuanguihua/renlixuqiuyc/renlixuqiuyc', icon: '', text: ' 人力资源需求预测 ' ,keywords:['人力资源规划 > 人力资源需求预测']},
      { to: '/main/renshi/renliziyuanguihua/renligongjiyc/renligongjiyc', icon: '', text: ' 人力资源供给预测 ' ,keywords:['人力资源规划 > 人力资源供给预测']},
      { to: '/main/renshi/renliziyuanguihua/rlzygongxuphgh/rlzygongxuphgh', icon: '', text: ' 人力资源供需平衡规划 ' ,keywords:['人力资源规划 > 人力资源供需平衡规划']},
      { to: '/main/renshi/renliziyuanguihua/rlzypeizhigh/rlzypeizhigh', icon: '', text: ' 人力资源配置规划 ',keywords:['人力资源规划 > 人力资源配置规划'] },
      { to: '/main/renshi/renliziyuanguihua/peixunkaifagh/peixunkaifagh', icon: '', text: ' 培训与开发规划 ' ,keywords:['人力资源规划 > 培训与开发规划']},
      { to: '/main/renshi/renliziyuanguihua/xinchoufuligh/xinchoufuligh', icon: '', text: ' 薪酬与福利规划 ' ,keywords:['人力资源规划 > 薪酬与福利规划']},
      { to: '/main/renshi/renliziyuanguihua/rlzyyucegh/rlzyyucegh', icon: '', text: ' 人力资源预测规划 '  ,keywords:['人力资源规划 > 人力资源预测规划']},
      { to: '/main/renshi/renliziyuanguihua/rlzypingutiaozhen/rlzypingutiaozhen', icon: '', text: ' 人力资源规划的评估与调整 '  ,keywords:['人力资源规划 > 人力资源规划的评估与调整']},
      { to: '/main/renshi/jiaqingfenxi', icon: '', text: ' 假勤分析 ' },
      // { to: '/main/renshi/jixiao', icon: '', text: ' 绩效考核 ' },
      { to: '/main/renshi/jixiao/nianyue', icon: '', text: ' 年月工作计划与考核 ' },
      { to: '/main/renshi/jixiao/jixiaojilu', icon: '', text: ' 绩效面谈记录表 ' },
      { to: '/main/renshi/jixiao/jxshensu', icon: '', text: ' 绩效考评申诉表 ' },
      { to: '/main/renshi/jixiao/xzyidong', icon: '', text: ' 职位薪资异动申请表 ' },
      { to: '/main/renshi/jixiao/jxjjshenqin', icon: '', text: ' 绩效奖金申请单 ' },
      { to: '/main/renshi/jixiao/jixiaoxize', icon: '', text: ' 绩效考核实施细则 ' },
      { to: '/main/renshi/jixiao/wjxiudinsqd', icon: '', text: ' 绩效考核文件新增修订废止申请单 ' },
      { to: '/main/renshi/jixiao/jxjiangjjs', icon: '', text: ' 绩效奖金基数报批表 ' },
      { to: '/main/renshi/jixiao/wjfafanghs', icon: '', text: ' 绩效考核文件发放与回收记录 ' },
      // { to: '/main/renshi/kaoqing', icon: '', text: ' 考勤管理办法 ' },
      { to: '/main/renshi/kaoqing/setting', icon: '', text: ' 考勤设置 ' },
      { to: '/main/renshi/kaoqing/clockin', icon: '', text: ' 考勤打卡 ' },
      { to: '/main/renshi/kaoqing/kaoqinguize/kaoqinguize', icon: '', text: ' 考勤规则 ' },
      { to: '/main/renshi/kaoqing/signin', icon: '', text: ' 考勤打卡 ' },
      { to: '/main/renshi/kaoqing/jiangchen', icon: '', text: ' 奖惩管理 ' },
      { to: '/main/renshi/kaoqing/jiangchen/zhaunxiangjlsqd', icon: '', text: ' 专项奖励申请单 ' },
      { to: '/main/renshi/kaoqing/jiangchen/jiangchengtb', icon: '', text: ' 奖惩提报单 ' },
      { to: '/main/renshi/kaoqing/kqguanli', icon: '', text: ' 考勤管理流程 ' },
      { to: '/main/renshi/kaoqing/kqguanli/huizong', icon: '', text: ' 考勤汇总表 ' },
      { to: '/main/renshi/kaoqing/kqguanli/kqyichanggl', icon: '', text: ' 考勤异常确认表 ' },
      { to: '/main/renshi/kaoqing/qingjia', icon: '', text: ' 请假申请 ' },
      { to: '/main/renshi/kaoqing/churu', icon: '', text: ' 员工临时出入登记表 ' },
      { to: '/main/renshi/kaoqing/gwwaichu', icon: '', text: ' 公务外出申请单 ' },
      { to: '/main/renshi/kaoqing/ycchuqin', icon: '', text: ' 异常出勤签录申请单 ' },
      { to: '/main/renshi/kaoqing/jiabansq', icon: '', text: ' 加班申请单 ' },
      { to: '/main/renshi/kaoqing/wjhuishou/wjhuishou', icon: '', text: ' 考勤管理办法文件发放与回收记录 ' },
      { to: '/main/renshi/kaoqing/wjxiudin/wjxiudin', icon: '', text: ' 考勤管理办法文件新增 / 修订 / 废止申请单 ' },
      { to: '/main/renshi/kaoqing/kqguanlibf/kqguanlibf', icon: '', text: ' 考勤管理办法 ' },
      { to: '/main/renshi/kaoqing/kaoqinliuchen/kaoqinliuchen', icon: '', text: ' 考勤管理流程 ' },
      { to: '/main/renshi/kaoqing/kqzhuanyuanzwsm/kqzhuanyuanzwsm', icon: '', text: ' 企管部人资组 考勤专员职位说明书 ' },
      // { to: '/main/biao', icon: '', text: ' 招聘管理 ' },
      { to: '/main/renshi/zhaoping/zhaopingxiudin', icon: '', text: ' 招聘管理》招聘流程修订内容 ' },
      { to: '/main/biao/mianshijl', icon: '', text: ' 面试记录表 ' },
      { to: '/main/biao/zenbus', icon: '', text: ' 招聘管理进人员增补申请单 ' },
      { to: '/main/biao/zenbu', icon: '', text: 'AMSP 进人员增补申请单 ' },
      { to: '/main/biao/rzziliao', icon: '', text: ' 员工入职资料表 ' },
      { to: '/main/biao/zhiweishuoming', icon: '', text: ' 职位说明书 ' },
      { to: '/main/biao/zerenshu', icon: '', text: ' 岗位职责目标责任书 ' },
      { to: '/main/biao/jibenxz', icon: '', text: ' 职员基本薪资核定表 ' },
      { to: '/main/biao/jixiaoxz', icon: '', text: ' 职员绩效薪资核定表 ' },
      { to: '/main/biao/gsqiandao', icon: '', text: ' 公司规章制度签到表 ' },
      { to: '/main/biao/heding', icon: '', text: ' 员工入职信息核定表 ' },
      { to: '/main/biao/beidiao', icon: '', text: ' 背景调查表 ' },
      { to: '/main/renshi/zhaoping/mianshitzs/mianshitzs', icon: '', text: ' 人事》招聘管理》面试通知书 ' },
      { to: '/main/renshi/zhaoping/luyongtzs/luyongtzs', icon: '', text: ' 人事》招聘管理》录用通知书 ' },
      { to: '/main/renshi/zhaoping/gongzuobxhpb/gongzuobxhpb', icon: '', text: ' 人事》招聘管理》工作表现核评表 ' },
      { to: '/main/renshi/zhaoping/yijipgb/yijipgb', icon: '', text: ' 人事》招聘管理》一级评估输出指引表 ' },
      { to: '/main/renshi/zhaoping/sanjianquan/sanjianquan', icon: '', text: ' 人事》招聘管理》三级安全教育制度教育技能教育培训卡 ' },
      { to: '/main/biao/pxqiandao', icon: '', text: ' 新员工入职培训签到表（入职流程暂无此步，新员工入职管理有）' },
      // { to: '/main/renshi/renshidiaodong', icon: '', text: ' 人事调动 ' },
      { to: '/main/renshi/renshidiaodong/lizhibanfa/lizhibanfa', icon: '', text: ' 离职管理办法 ', keywords: ['离职管理办法 离职通知书'] },
      { to: '/main/renshi/renshidiaodong/yuangongxiuzhi/yuangongxiuzhi', icon: '', text: ' 员工休职 ', keywords: ['休职'] },
      { to: '/main/renshi/renshidiaodong/yuangongfuzhi/yuangongfuzhi', icon: '', text: ' 员工复职 ', keywords: ['复职'] }
    ]
  };
},
computed: {
  filteredLinks() {
    return this.links.filter(link =>
      link.text.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
      (link.keywords && link.keywords.some(keyword => keyword.toLowerCase().includes(this.searchQuery.toLowerCase())))
    ).slice(0, 13); // 添加这一行代码以截取前13个元素
  }
},
watch: {
  searchQuery: {
    immediate: true,
    handler(newValue) {
      console.log('searchQuery值发生变化:', newValue);
      // 如果需要在这里进行额外操作，可以添加代码
    }
  }
},
// mounted() {
//     this.checkScrollbar();
//     window.addEventListener('resize', this.checkScrollbar);
//   },
//   beforeDestroy() {
//     window.removeEventListener('resize', this.checkScrollbar);
//   },
//   methods: {
//     checkScrollbar() {
//       const div = this.$refs.chart;
//       if (document.body.scrollHeight > window.innerHeight) {
//         div.style.display = 'none';
//       } else {
//         div.style.display = 'block';
//       }
//     }
  // }
};
</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: antiquewhite;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .i {
    font-size: 24px !important;
    margin-bottom: 12px;
    transition: all 0.3s ease;
  }

  .content {
    background-color: #fff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 50px;
    // height: calc(100vh - 160px);
    max-height: 680px;
    width: 800px;
    margin: 0 auto;

    .section-header {
      text-align: center;
      margin-bottom: 20px;

      .section-title {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #409eff, #66b1ff);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        i {
          margin-right: 8px;
          font-size: 20px;
        }

        span {
          font-size: 20px;
          font-weight: 500;
        }
      }

      .section-desc {
        color: #909399;
        font-size: 16px;
      }
    }

    .page-header {
      display: flex;
      align-items: center;
      justify-content: center;
      // margin-bottom: 24px;
      background-color: #fff;
      padding: 16px 24px;
      border-radius: 8px 8px 0px 0px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      width: 850px;
      margin: 0 auto;
    }

    .back-link {
      // display: flex;
      align-items: center;
      text-decoration: none;
      color: #409eff;
      // font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        // margin-right: 5px;
      }

      &:hover {
    color: #66b1ff;
    transform: translateX(-3px);
      }
    }

    .search-input {
      padding: 3px 10px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    }

    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }

    .button-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 800px;
      height: 494.4px;
      margin: 0px auto;
      gap: 15px;
      // padding: 5px 20px;

      .nav-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background-color: #f5f7fa;
        color: #606266;
        padding: 24px;
        border-radius: 8px;
        transition: all 0.3s ease;
        border: 1px solid #ebeef5;
        height: 70px;
        i {
          font-size: 24px;
          margin-bottom: 12px;
          color: #409eff;
          transition: all 0.3s ease;
        }

        span {
          font-size: 18px;
          font-weight: 500;
        }

        &:hover {
          transform: translateY(-5px);
          background-color: #ecf5ff;
          border-color: #409eff;
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);

          i {
            transform: scale(1.2);
          }

          span {
            color: #409eff;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .container {
    padding: 12px;

    .page-header {
      padding: 12px 16px;
    }

    .content {
      padding: 20px 16px;

      .section-header {
        margin-bottom: 24px;

        .section-title {
          padding: 8px 16px;

          i {
            font-size: 18px;
          }

          span {
            font-size: 16px;
          }
        }
      }

      .button-container {
        grid-template-columns: 1fr;
        padding: 0;

        .nav-button {
          padding: 16px;
          height: auto;
          flex-direction: row;
          justify-content: flex-start;

          i {
            margin-bottom: 0;
            margin-right: 12px;
          }
        }
      }
    }
  }
}
</style>